<template>
  <div class="_home_warp">
    <div class="_cards" v-for="item in list">
      <!--          <img src="" alt="">-->
      <div class="_card_img">
        <img :src="item.image_url" alt="" :style="imgStyle" />
      </div>
      <div class="_card_b">
        <div class="_card_xx">
          <div>{{ item.name }} #0</div>
          <div>X{{ item.count }}</div>
        </div>
        <div class="_card_num">
          <div class="_txt">Fixed price</div>
          <div style="display: flex; align-items: center">
            <div class="_img"></div>
            <div class="_num">
              {{ fromWei(item.fixed_price) }} {{ item.unit }}
            </div>
          </div>
        </div>
        <div class="_card_rmb" @click="onRevoke(item)">
          <div>Revoke</div>
        </div>
      </div>
    </div>
  </div>

  <Dialog v-if="s.loading" title="Wait" :close="close"></Dialog>
</template>

<script setup>
import Dialog from "@/components/Dialog/Dialog.vue";
import http from "../../../../http";
import { ref } from "vue";
import { cancelSell, watch } from "../../../../dapp";

const list = ref([]);
const s = ref({
  loading: false,
});

function close() {
  console.log("close");
  s.value.loading = false;
}

async function init() {
  var res = await http.get("/api/my-sales");
  if (res.code === 200) {
    list.value = res.list;
    // list.value = [
    //   {
    //     image_url:
    //       "https://mhyz1.oss-accelerate.aliyuncs.com/nftinfo/images/20020.png",
    //   },
    //   {
    //     image_url:
    //       "https://mhyz1.oss-accelerate.aliyuncs.com/nftinfo/images/20020.png",
    //   },
    //   {
    //     image_url:
    //       "https://mhyz1.oss-accelerate.aliyuncs.com/nftinfo/images/20020.png",
    //   },
    // ];
  }
}

var submit = false;

async function onRevoke(current) {
  if (submit) {
    return;
  }
  submit = true;
  console.log("revoke", current);
  try {
    var res = await http.get(`/api/nft-sales/${current.id}`)
    var type = res.data.type
    var txid = await cancelSell(
      current.id,
      current.standard === "BEP20" ? 1 : 0,
      type
    );
    console.log("txid=", txid);
    // Toast('Submit')
    s.value.loading = true;
    console.log("wait tx confirm");

    await watch(txid);
    await http.get(`/api/sync?txid=${txid}`);
    console.log("tx was confirm");
    init();
  } catch (e) {
    console.log("err=", e);
    if (e.message.indexOf("cant buy from yourself") !== -1) {
      Toast("Cant buy from yourself");
    } else if (e.message.indexOf("sold or canceled") !== -1) {
      Toast("Sold or canceled");
    }
  }
  s.value.loading = false;
  submit = false;
}

init();
</script>


<script>
export default {
  computed: {
    imgStyle() {
      return document.body.clientWidth <= 750
        ? {
            height: "100vw",
            maxWidth: "350px",
            maxHeight: "350px",
          }
        : {
            height: "243px",
          };
    },
  },
};
</script>

<style scoped lang="scss">
._home_warp {
  display: grid;
  grid-template-columns: 1fr 1fr 1fr 1fr;
  grid-column-gap: 107px;
  grid-row-gap: 30px;
  margin-top: 60px;
}
._cards {
  border: 1px solid #d9d9d9;
  margin-top: 5px;
}
._card_img {
  width: 100%;
  padding: 15px 0px;
  text-align: center;
  // img {
  //   // width: 100%;
  //   height: 100%;
  //   /*background-color: pink;*/
  // }
}
._card_b {
  padding: 0 18px 30px 18px;
}
._card_xx {
  display: flex;
  align-items: center;
  margin-top: 18px;
  padding-bottom: 14px;
  border-bottom: 1px solid #d9d9d9;
  margin-bottom: 7px;
  > div {
    &:nth-child(1) {
      font-size: 20px;
      font-family: PingFangSC-Semibold, PingFang SC;
      font-weight: 600;
      color: #393939;
    }
    &:nth-child(2) {
      font-size: 12px;
      font-family: PingFangSC-Semibold, PingFang SC;
      font-weight: 600;
      color: #fdb919;
      width: 40px;
      height: 20px;
      background: rgba(249, 178, 7, 0.33);
      border-radius: 10px;
      border: 1px solid #fdb71c;
      text-align: center;
      line-height: 20px;
      margin-left: 2px;
    }
  }
}
._card_rmb {
  width: 100%;
  background: #fcc33c;
  border-radius: 1px;
  height: 26px;
  font-size: 14px;
  font-family: PingFangSC-Semibold, PingFang SC;
  font-weight: 600;
  color: #383838;
  line-height: 26px;
  text-align: center;
  margin-top: 13px;
  cursor: pointer;
}
._card_num {
  ._txt {
    font-size: 14px;
    font-family: PingFangSC-Semibold, PingFang SC;
    font-weight: 600;
    color: #afafaf;
    padding-bottom: 9px;
  }
  ._num {
    font-size: 14px;
    font-family: PingFangSC-Semibold, PingFang SC;
    font-weight: 600;
    color: #383838;
  }
  ._img {
    /*width: 30px;*/
    height: 16px;
    /*background: url("@/assets/c1.png") no-repeat center;*/
    background-size: cover;
    /*margin-right: 7px;*/
  }
}

@media screen and (max-width: 750px) {
  ._home_warp {
    margin-top: 10px;
    display: flex;
    flex-direction: column;
    /*padding: 20px;*/
    /*overflow: hidden;*/
    /*padding: 0*/
  }
}
</style>
